<template>
  <div class="stockDeviceType">
    <div class="card-table">
      <!-- 新增按钮 -->
      <el-button
        style="margin-bottom: 12px"
        icon="el-icon-plus"
        type="primary"
        @click="handleEditAndCreate('add')"
        >新增</el-button
      >
      <el-table
        :header-cell-style="getRowClass"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column align="center" type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column align="center" label="长度" width="width">
          <template slot-scope="{ row }">
            {{ row.dates }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="unit" label="备注" width="width">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="{ row }">
            <el-button @click="handleEditAndCreate('edit', row)" type="text"
              >修改</el-button
            >
            <el-button
              style="margin-left: 0"
              @click="deleteOne(row)"
              type="text"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加和修改表单 -->
      <el-dialog
        :modal-append-to-body="false"
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-form
          :model="formCreate"
          status-icon
          :rules="formCreateRuls"
          ref="formCreate"
          label-width="80px"
        >
          <el-form-item label="长度" prop="ip">
            <el-input v-model="formCreate.ip"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button
            @click="
              dialogVisible = false;
              formCreate.ip = '';
            "
            >取消</el-button
          >
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确定</el-button
          >
          
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  LengthgetAll,
  Lengthcreate,
  Lengthupdata,
  Lengthdelete,
} from "@/api/stock/length.js";

export default {
  components: {},
  data() {
    return {
      control: "",
      operation: "",
      dialogTitle: "",
      dialogVisible: false,
      formCreate: {
        ip: "",
        id:""
      },
      tableData: [],
      formCreateRuls: {
        ip: [
          { required: true, message: "长度不能为空", trigger: "blur" },
          { pattern: "^[0-9]+([.]{1}[0-9]+){0,1}$", message: "请输入整数或者小数" },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      LengthgetAll().then((res) => {
        this.tableData = res.data.data.pageData;
      });
    },
        submitForm() {
this.$refs.formCreate.validate(valid=>{
      if(valid){
 if (this.operation) {
             this.control = 1;
      const params = {
        dates: this.formCreate.ip,
      };
      Lengthcreate(params).then((res) => {
        this.common(res);
      });
          } else {
      const params = {
        dates: this.formCreate.ip,
        _id: this.formCreate.id
      };
      this.control = 2;
      Lengthupdata(params).then((res) => {
        this.common(res);
      });
          }
          this.dialogTableVisible = false;

        }else {
          console.log('error submit!!')
          return false
        }
    })
        },
    handleEditAndCreate(handle, row) {
      if (handle === "add") {
        this.operation = true; // 用于判断提交时是创建还是编辑
        this.dialogVisible = true;
        this.dialogTitle = "添加长度";
      } else {
        this.operation = false; 
        this.formCreate.ip = row.dates;
        this.formCreate.id = row._id;
        // this.ruleForm = JSON.parse(JSON.stringify(row));
        this.dialogVisible = true;
        this.dialogTitle = "修改长度";
      }
    },
    deleteOne(row) {
      this.control = 3;
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const params = {
            _id: row._id,
          };
          Lengthdelete(params).then((res) => {
            this.common(res);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    common(res) {
      if (res.data.code === 200) {
        switch (this.control) {
          case 1:
            this.$message({
              type: "success",
              message: "添加成功",
            });
            break;
          case 2:
            this.$message({
              type: "success",
              message: "修改成功",
            });
            break;
          case 3:
            this.$message({
              type: "success",
              message: "删除成功",
            });
        }
        this.getData();
        this.dialogVisible = false;
        this.formCreate.ip = "";
      } else {
        this.$message({
          type: "warning",
          message: res.data.message,
        });
      }
    },
  },
};
</script>

<style  scoped></style>
